mapboxgl.accessToken = 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A';

var drawTool = null

const center = [104.1324, 36.92669]

const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: center, // starting position [lng, lat]
    zoom: 3 // starting zoom
});

const bounds = map.getBounds().toArray()

map.on('load', () => {
    drawTool = new DrawTool(map)
    draw()
    map.on('move', draw);
})

function draw() {
    drawTool.clear()
    const {x, y} = map.project(center)
    drawTool.drawPoint(x, y)
    const xys = bounds.map(p => {
        const r = map.project(p)
        return [r.x, r.y]
    })
    drawTool.drawLine(xys)
}